<template>

  <div ref="head" :class={[tabClassName]:true} @touchstart="stopSlid"><!-- -->
    <slot></slot>
  </div>

</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    data () {
      return {}
    },
    mounted () {
      var bounce = this.bounce
      var scroll = new BScroll(this.$refs.head, {
        startX: 0,
        startY: 0,
        scrollX: true,
        scrollY: false,
//        click: true,
        stop: true,
        freeScroll: true,
        momentum: true,
        bounce: bounce,
        eventPassthrough: 'vertical',
      })
      this.scroll = scroll
    },
    updated () {
      this.scroll.refresh()
    },
    props: {
      tabClassName: {
        type: String,
        default: ""
      },
      bounce: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      stopSlid () {
        this.$store.commit('xxy/setstoptouch', false)
      }
    },
    computed: {},
    components: {}
  }
</script>

<style lang="less">
  .ranking_head_box {
    width: 100%;
    top: 3rem;
    height: 3.7rem;
    z-index: 1;
    background: white;
  }

</style>
